<template>
  <view class="phone-code-login">
    <view class="su-login-title">
      用户登录
    </view>
    <view class="su-login-slogan">
      {{config.slogan || ''}}
    </view>
    <u--form :border-bottom="false" labelPosition="left" :model="formData" :rules="rules" ref="form1">
      <u-form-item class="login-form-item" :border-bottom="false" label="账号" labelWidth="4em" prop="username"
        borderBottom ref="item1">
        <u--input v-model="formData.username" border="none" placeholder="请输入账号"></u--input>
      </u-form-item>
      <u-form-item class="login-form-item" :border-bottom="false" label="密码" labelWidth="4em" prop="password" borderBottom
        ref="item1">
        <u--input type="password" v-model="formData.password" border="none" placeholder="请输入密码"></u--input>
      </u-form-item>
      <!-- 找回密码 -->
      <view class="login-forget-password mb20">
        忘记密码？<text @click="findBackPassword">找回密码</text>
      </view>
      <view class="form-button mt35">
        <u-button type="primary" size="large" :loading="loading" text="登录" @click="loginHandler"></u-button>
      </view>
    </u--form>
  </view>
</template>

<script>
  /**
   * @description 密码登录
   * @date 2022-03-16
   * @version v1.0.1
   * @author gf
   */
  import {
    login
  } from '@/common/api.js'
  export default {
    name: "phone-code-login",
    props: {
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 系统配置
        config: this.$config,
        formData: {
          "username": "", 
          "password": "",
        },
        // 表单校验规则
        rules: {
          username: [{
              required: true,
              message: '请填写手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur'],
            }
          ],
          password: {
            required: true,
            message: '请填写密码',
            trigger: ['change', 'blur'],
          }
        }
      };
    },
    methods: {
      // 登录
      loginHandler() {
        this.$refs.form1.validate().then(ok => {
          if (ok) {
            this.$emit('login', this.formData)
          }
        }).catch(err => {
          return
        })
      },
      // 找回密码跳转
      findBackPassword(){
        this.$u.route({
          url:'pages/package2/retrievePassword/retrievePassword'
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "./login.scss";

  .phone-code-login {
    width: 100%;
  }

  .wx-avatar-box {
    margin-bottom: 60upx;
  }

  .login-wx-avatar {
    width: 220upx;
    height: 220upx;
    border-radius: 120upx;
    background-color: #fff;
  }

  .wx-button-box {
    width: 100%;
  }
</style>
